﻿<FluentStack Style="margin-bottom: 24px;" VerticalAlignment="VerticalAlignment.Center">
    <FluentLabel>Justify</FluentLabel>
    <FluentSelect Items=@(Enum.GetValues<JustifyContent>())
                  OptionValue="@(c => c.ToAttributeValue())"
                  TOption="JustifyContent"
                  Position="SelectPosition.Below"
                  @bind-SelectedOption="@Justification" />

    <FluentLabel>Spacing</FluentLabel>
    <FluentSlider @bind-Value="@Spacing" Min="0" Max="10" Step="1" Style="max-width: 300px; margin-top: 18px;" />
</FluentStack>

<FluentGrid Spacing="@Spacing" OnBreakpointEnter="@OnBreakpointEnterHandler" AdaptiveRendering="true" Justify="@Justification" Style="background-color: var(--neutral-layer-3); padding: 4px; ">
    <FluentGridItem xs="12">
        <div class="card">
            xs="12"
        </div>
    </FluentGridItem>
    <FluentGridItem xs="12" sm="6" HiddenWhen="GridItemHidden.SmAndDown">
        <div class="card">
            xs="12" sm="6" Hidden="SmAndDown"
        </div>
    </FluentGridItem>
    <FluentGridItem xs="12" sm="6">
        <div class="card">
            xs="12" sm="6"
        </div>
    </FluentGridItem>
    <FluentGridItem xs="6" sm="3">
        <div class="card">
            xs="6" sm="3"
        </div>
    </FluentGridItem>
    <FluentGridItem xs="6" sm="3">
        <div class="card">
            xs="6" sm="3"
        </div>
    </FluentGridItem>
    <FluentGridItem xs="6" sm="3">
        <div class="card">
            xs="6" sm="3"
        </div>
    </FluentGridItem>
    <FluentGridItem xs="6" sm="3">
        <div class="card">
            xs="6" sm="3"
        </div>
    </FluentGridItem>
    <FluentGridItem xs="3">
        <div class="card">
            xs="3"
        </div>
    </FluentGridItem>
</FluentGrid>

@code
{
    JustifyContent Justification = JustifyContent.FlexStart;
    int Spacing = 3;

    void OnBreakpointEnterHandler(GridItemSize size)
    {
        DemoLogger.WriteLine($"Page Size: {size}");
    }
}
